<template>
	<div>
		<div id="dialog" v-if="showToast1"></div>
		<div class="Toast"
			 v-if="showToast1">
			{{ message }}
		</div>
	</div>
</template>
<script>
    export default {
        name: "Toast",
        props: {
            showToast: {
                // 激活
                type: Boolean,
                default: false
            },
            message: {
                type: String,
                required: true
            },
            delay: {
                type: Number,
                default: 3000
            }
        },
        data() {
            return {
				showToast1:false,
            }
        },
        methods: {
            // Toast消失
            disappear() {
				console.log("disappear调用");
				this.showToast1 = true;
				setTimeout(() => {
					this.showToast1 = false;
				}, this.delay)
            },
        }
    }
</script>

<style scoped>
    .Toast {
        position: fixed;
        left: 50%;
        top: 50%;
        background: rgb(233, 233, 235);
        padding: 10px;
        border-radius: 5px;
        transform: translate(-50%, -50%);
        animation: show-toast .2s;
        color: #909399;
        overflow: hidden;
        display: flex;
        align-items: center;
		z-index: 999;
    }

    @keyframes show-toast {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;

        }
    }
	@keyframes hide-toast {
	    from {
	        opacity: 1;
	    }
	    to {
	        opacity: 0;
	
	    }
	}
	#dialog{
		position: fixed;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-color: #2C3E50;
		opacity: 0.7;
		z-index: 998;
	}
</style>

